<template>
  <div class="target_model_box">
    <a-row>
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
        <a-col :span="18">
          <a-form-model-item label="选择时间">
            <a-range-picker
              :allowClear="true"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="rangePickerTime"
              @change="rangePickerChange"
              :show-time="{ format: 'HH:mm:ss' }"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="4" v-if="isOperation">
          <a-button type="primary" style="margin-left:20px;margin-top: 4px;" :disabled="isDisabled" @click="onQuery"
            >查询</a-button
          >
        </a-col>
      </a-form-model>
    </a-row>
    <z-table
      ref="table"
      rowKey="id"
      :showAlert="false"
      :showSelection="true"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
      @selectedRow="onSelectedRow"
      :customRow="clickCustomRow"
      @change="onTableChange"
    >
      <template slot="result" slot-scope="text">
        <span v-if="text == 1" style="color:rgba(112, 182, 3, 0.9)">查询中</span>
        <span v-else-if="text == 2" style="color:#1890FF">已查询</span>
        <span v-else style="color:rgba(217, 0, 27, 0.99)">未查询</span>
      </template>
      <template slot="phoneNumber" slot-scope="text, record">
        <span>{{ text }}</span>
        <a-tag v-if="record.isSamplePerson" style="margin-top:10px;" color="red">负样本人员</a-tag>
      </template>
    </z-table>
  </div>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
// import { querySimpleByPhoneList } from '@/utils/util'
export default {
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      pageFilter: {
        // taskId: this.$route.query.taskId,
        queryType: 1,
        pageNo: 1,
        pageSize: 10
      },
      queryFilter: {
        //查询参数
        taskNum: this.$route.query.taskId
      },
      pageData: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width: 80,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          // customRender: (text, record, index) => `${(this.pagination.current - 1) * this.pagination.defaultPageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '手机号',
          dataIndex: 'phoneNumber',
          scopedSlots: { customRender: 'phoneNumber' }
        },
        {
          title: '姓名/代号',
          dataIndex: 'userName'
        },
        // {
        //   title: '查询状态',
        //   dataIndex: 'result',
        //   scopedSlots: { customRender: 'result' }
        // },
        // {
        //   title: '数据更新时间',
        //   width: 140,
        //   dataIndex: 'resultTime'
        // }
      ],
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      isDisabled: true,
      selectKeys: [],
      rangePickerTime: [],
      loading: false,
      isOperation: true
    }
  },
  mounted() {
    this.refreshTable()
  },
  methods: {
    // 路由变化
    setOperation(val, taskId) {
      this.isOperation = val
      if (taskId != undefined) {
        this.queryFilter.taskNum = taskId
        this.pageFilter.taskId = taskId
      }
      this.refreshTable()
    },
    clickCustomRow(record) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            if (record.result !== 2) {
              this.$message.warning('未查询出结果，无法操作')
              return
            }
            record.rangePickerTime = this.rangePickerTime
            _this.$emit('clickRow', record)
          }
        }
      }
    },
    rangePickerChange(date, dateString) {
      this.$set(this.queryFilter, 'startTime', date[0])
      this.$set(this.queryFilter, 'endTime', date[1])
      let dateBegin = new Date(dateString[0].replace(/-/g, '/'))
      let dateEnd = new Date(dateString[1].replace(/-/g, '/'))
      let dateDiff = dateEnd.getTime() - dateBegin.getTime() // 时间差的毫秒数
      let hours = dateDiff / 1000 / 60 / 60 // 计算天数后剩余的毫秒数
      let currentTime = new Date().getTime()
      if (currentTime - dateBegin < 0) {
        this.$message.error('开始日期不能大于当前日期')
        this.rangePickerTime = []
      }
      let date1 = Math.floor(dateDiff / (24 * 3600 * 1000))
      if (date1 > 14) {
        this.$message.error('最大时间范围不超过15天')
        this.rangePickerTime = []
      }
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    onQuery() {
      if (!this.queryFilter.startTime || !this.queryFilter.endTime) {
        this.$message.warning('请选择时间')
        return false
      }
      this.queryFilter.phone = this.selectKeys.map(item => item.phoneNumber)
      this.queryHistoryTrajectory()
      // this.$emit('querySuccess')
    },
    refreshTable() {
      // let formData = Object.assign({}, this.formData, this.pageFilter)
      this.loading = true
      alarmServiceApi
        .getTrajectoryList(this.pageFilter)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result
            //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
            // querySimpleByPhoneList(this, 1, this.pageData.records)
            // this.$emit('querySuccess')
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    queryHistoryTrajectory() {
      api
        .queryHistoryTrajectory(this.queryFilter)
        .then(res => {
          if (res.success) {
            this.refreshTable()
            this.$message.info(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    }
  }
}
</script>
<style scoped lang="less">
/deep/.ant-table-row {
  cursor: pointer;
}
</style>
